<template>
  <div class="recommendation-card">
    <el-card shadow="never" class="card-container">
      <!-- 卡片标题 -->
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon class="header-icon"><Star /></el-icon>
            <span class="header-title">智能推荐</span>
          </div>
          <div class="header-right">
            <el-tooltip content="基于客户信息智能推荐">
              <el-icon class="help-icon"><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
        </div>
      </template>

      <!-- 基于年龄的推荐 -->
      <div v-if="ageBasedRecommendations.length > 0" class="recommendation-section">
        <div class="section-title">
          <el-icon><Timer /></el-icon>
          <span>年龄适配推荐</span>
        </div>
        
        <div class="recommendations-list">
          <div 
            v-for="(rec, index) in ageBasedRecommendations" 
            :key="index"
            class="recommendation-item age-based"
          >
            <div class="recommendation-header">
              <el-icon class="rec-icon" :class="rec.icon">
                <component :is="getIconComponent(rec.icon)" />
              </el-icon>
              <span class="rec-title">{{ rec.title }}</span>
            </div>
            
            <p class="rec-description">{{ rec.description }}</p>
            
            <div class="rec-actions">
              <el-button 
                size="small" 
                type="primary" 
                @click="applyRecommendation(rec)"
              >
                <el-icon><Check /></el-icon>
                应用推荐
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 基于健康状况的推荐 -->
      <div v-if="healthBasedRecommendations.length > 0" class="recommendation-section">
        <div class="section-title">
          <el-icon><FirstAidKit /></el-icon>
          <span>健康适配推荐</span>
        </div>
        
        <div class="recommendations-list">
          <div 
            v-for="(rec, index) in healthBasedRecommendations" 
            :key="index"
            class="recommendation-item health-based"
          >
            <div class="recommendation-header">
              <el-icon class="rec-icon health-icon">
                <FirstAidKit />
              </el-icon>
              <span class="rec-title">{{ rec.title }}</span>
            </div>
            
            <p class="rec-description">{{ rec.description }}</p>
            
            <div class="rec-actions">
              <el-button 
                size="small" 
                type="warning" 
                @click="applyRecommendation(rec)"
              >
                <el-icon><Check /></el-icon>
                应用推荐
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 填写提示 -->
      <div v-if="fillTips.length > 0" class="recommendation-section">
        <div class="section-title">
          <el-icon><Bell /></el-icon>
          <span>填写提示</span>
        </div>
        
        <div class="tips-list">
          <el-alert 
            v-for="(tip, index) in fillTips" 
            :key="index"
            :title="tip.title"
            :description="tip.description"
            :type="tip.alertType"
            show-icon
            :closable="false"
            class="tip-alert"
          />
        </div>
      </div>

      <!-- 智能建议 -->
      <div v-if="smartSuggestions.length > 0" class="recommendation-section">
        <div class="section-title">
          <el-icon><Cpu /></el-icon>
          <span>智能建议</span>
        </div>
        
        <div class="suggestions-list">
          <div 
            v-for="(suggestion, index) in smartSuggestions" 
            :key="index"
            class="suggestion-item"
          >
            <div class="suggestion-header">
              <el-icon class="suggestion-icon" :color="suggestion.color">
                <component :is="suggestion.icon" />
              </el-icon>
              <span class="suggestion-title">{{ suggestion.title }}</span>
              <el-tag :type="suggestion.priority" size="small">
                {{ getPriorityText(suggestion.priority) }}
              </el-tag>
            </div>
            
            <p class="suggestion-description">{{ suggestion.description }}</p>
            
            <div class="suggestion-actions" v-if="suggestion.actions">
              <el-button 
                v-for="action in suggestion.actions" 
                :key="action.text"
                size="small" 
                :type="action.type"
                @click="handleSuggestionAction(action, suggestion)"
              >
                <el-icon><component :is="action.icon" /></el-icon>
                {{ action.text }}
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关客户推荐 -->
      <div class="recommendation-section">
        <div class="section-title">
          <el-icon><UserFilled /></el-icon>
          <span>相似客户参考</span>
        </div>
        
        <div class="similar-customers">
          <div class="customers-info">
            <el-icon class="info-icon"><InfoFilled /></el-icon>
            <span class="info-text">基于已输入信息，为您找到了相似客户的偏好模式</span>
          </div>
          
          <div class="reference-data">
            <div class="data-item">
              <span class="data-label">相似年龄段客户偏好：</span>
              <div class="preference-tags">
                <el-tag v-for="pref in similarCustomerPreferences.age" :key="pref" size="small">
                  {{ pref }}
                </el-tag>
              </div>
            </div>
            
            <div class="data-item">
              <span class="data-label">同等消费水平客户选择：</span>
              <div class="preference-tags">
                <el-tag v-for="pref in similarCustomerPreferences.budget" :key="pref" size="small" type="success">
                  {{ pref }}
                </el-tag>
              </div>
            </div>
          </div>
          
          <el-button 
            size="small" 
            type="info" 
            @click="showSimilarCustomers"
            class="view-similar-btn"
          >
            <el-icon><Search /></el-icon>
            查看相似客户
          </el-button>
        </div>
      </div>

      <!-- 数据补全建议 -->
      <div class="recommendation-section">
        <div class="section-title">
          <el-icon><Edit /></el-icon>
          <span>数据补全建议</span>
        </div>
        
        <div class="completion-suggestions">
          <div class="completion-item" v-for="item in dataCompletionSuggestions" :key="item.field">
            <div class="completion-header">
              <el-progress 
                type="circle" 
                :percentage="item.completeness" 
                :width="40"
                :stroke-width="4"
                class="completion-progress"
              />
              <div class="completion-info">
                <span class="completion-field">{{ item.field }}</span>
                <span class="completion-desc">{{ item.description }}</span>
              </div>
            </div>
            
            <el-button 
              size="small" 
              text 
              type="primary"
              @click="scrollToField(item.target)"
            >
              立即完善
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  Star, QuestionFilled, Timer, FirstAidKit, Bell, Cpu, UserFilled, 
  InfoFilled, Search, Edit, Check, Money, Star as Star2, Present as Gift, Warning,
  CircleCheck, Plus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  ageBasedRecommendations: {
    type: Array,
    default: () => []
  },
  healthBasedRecommendations: {
    type: Array,
    default: () => []
  },
  fillTips: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['apply-recommendation'])

// 获取图标组件
const getIconComponent = (iconName) => {
  const iconMap = {
    'Money': Money,
    'FirstAidKit': FirstAidKit,
    'Star': Star,
    'Gift': Gift
  }
  return iconMap[iconName] || Star
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const priorityMap = {
    'danger': '高优先级',
    'warning': '中优先级',
    'success': '低优先级',
    'info': '建议'
  }
  return priorityMap[priority] || '建议'
}

// 智能建议（根据已填写的信息动态生成）
const smartSuggestions = computed(() => {
  const suggestions = []
  
  // 这里可以基于表单数据生成智能建议
  suggestions.push({
    title: '完善旅游偏好',
    description: '建议填写详细的旅游偏好信息，有助于为客户推荐更合适的产品',
    icon: 'MapLocation',
    color: '#007AFF',
    priority: 'info',
    actions: [{
      text: '立即填写',
      type: 'primary',
      icon: 'Edit'
    }]
  })
  
  return suggestions
})

// 相似客户偏好（模拟数据）
const similarCustomerPreferences = computed(() => ({
  age: ['温泉养生', '文化古迹', '舒适酒店'],
  budget: ['品质型产品', '小团队出行', '专业导游']
}))

// 数据补全建议
const dataCompletionSuggestions = computed(() => [
  {
    field: '基础信息',
    description: '客户的基本信息和联系方式',
    completeness: 85,
    target: 'basicInfo'
  },
  {
    field: '旅游偏好',
    description: '出行预算、目的地和时间偏好',
    completeness: 60,
    target: 'travelPreferences'
  },
  {
    field: '健康信息',
    description: '健康状况和特殊需求',
    completeness: 40,
    target: 'healthInfo'
  },
  {
    field: '家庭信息',
    description: '家庭结构和决策模式',
    completeness: 30,
    target: 'familyInfo'
  }
])

// 应用推荐
const applyRecommendation = (recommendation) => {
  emit('apply-recommendation', recommendation)
  ElMessage.success(`已应用推荐：${recommendation.title}`)
}

// 处理建议操作
const handleSuggestionAction = (action, suggestion) => {
  if (action.text === '立即填写') {
    scrollToField('travelPreferences')
  }
  ElMessage.info(`执行操作：${action.text}`)
}

// 显示相似客户
const showSimilarCustomers = () => {
  ElMessage.info('查看相似客户功能待开发')
}

// 滚动到指定字段
const scrollToField = (target) => {
  const targetElement = document.querySelector(`[data-section="${target}"]`)
  if (targetElement) {
    targetElement.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'start' 
    })
  }
}
</script>

<style lang="scss" scoped>
.recommendation-card {
  margin-bottom: 16px;
  
  .card-container {
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    overflow: hidden;
    
    :deep(.el-card__header) {
      padding: 16px 20px;
      background: #F8F9FA;
      border-bottom: 1px solid #E5E5EA;
    }
    
    :deep(.el-card__body) {
      padding: 20px;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .header-icon {
          font-size: 18px;
          color: #FF9500;
        }
        
        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #3C3C43;
        }
      }
      
      .header-right {
        .help-icon {
          font-size: 16px;
          color: #8E8E93;
          cursor: help;
        }
      }
    }
  }
  
  // 推荐模块通用样式
  .recommendation-section {
    margin-bottom: 24px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #3C3C43;
      padding-bottom: 8px;
      border-bottom: 1px solid #E5E5EA;
      
      .el-icon {
        font-size: 16px;
        color: #FF9500;
      }
    }
  }
  
  // 推荐列表样式
  .recommendations-list {
    .recommendation-item {
      margin-bottom: 16px;
      padding: 16px;
      border-radius: 8px;
      border: 1px solid #E5E5EA;
      background: #FAFAFA;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:hover {
        background: #F0F0F0;
        border-color: #D1D1D6;
      }
      
      &.age-based {
        border-left: 4px solid #007AFF;
      }
      
      &.health-based {
        border-left: 4px solid #34C759;
      }
      
      .recommendation-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        
        .rec-icon {
          font-size: 18px;
          color: #FF9500;
          
          &.health-icon {
            color: #34C759;
          }
        }
        
        .rec-title {
          font-size: 14px;
          font-weight: 600;
          color: #3C3C43;
        }
      }
      
      .rec-description {
        font-size: 12px;
        color: #8E8E93;
        margin: 0 0 12px 0;
        line-height: 1.4;
      }
      
      .rec-actions {
        text-align: right;
      }
    }
  }
  
  // 填写提示样式
  .tips-list {
    .tip-alert {
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  // 智能建议样式
  .suggestions-list {
    .suggestion-item {
      margin-bottom: 16px;
      padding: 16px;
      border: 1px solid #E5E5EA;
      border-radius: 8px;
      background: #FAFAFA;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .suggestion-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        
        .suggestion-icon {
          font-size: 16px;
        }
        
        .suggestion-title {
          flex: 1;
          font-size: 14px;
          font-weight: 600;
          color: #3C3C43;
        }
      }
      
      .suggestion-description {
        font-size: 12px;
        color: #8E8E93;
        margin: 0 0 12px 0;
        line-height: 1.4;
      }
      
      .suggestion-actions {
        display: flex;
        gap: 8px;
      }
    }
  }
  
  // 相似客户样式
  .similar-customers {
    .customers-info {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding: 12px;
      background: #F0F8FF;
      border-radius: 6px;
      
      .info-icon {
        font-size: 16px;
        color: #007AFF;
      }
      
      .info-text {
        font-size: 12px;
        color: #3C3C43;
      }
    }
    
    .reference-data {
      margin-bottom: 16px;
      
      .data-item {
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .data-label {
          display: block;
          font-size: 12px;
          color: #3C3C43;
          margin-bottom: 6px;
        }
        
        .preference-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
      }
    }
    
    .view-similar-btn {
      width: 100%;
    }
  }
  
  // 数据补全建议样式
  .completion-suggestions {
    .completion-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 12px;
      border: 1px solid #E5E5EA;
      border-radius: 6px;
      background: #FAFAFA;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .completion-header {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        
        .completion-progress {
          flex-shrink: 0;
        }
        
        .completion-info {
          flex: 1;
          
          .completion-field {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #3C3C43;
            margin-bottom: 2px;
          }
          
          .completion-desc {
            font-size: 12px;
            color: #8E8E93;
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .recommendation-card {
    .card-container {
      :deep(.el-card__body) {
        padding: 16px;
      }
    }
    
    .completion-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      
      .completion-header {
        width: 100%;
      }
    }
    
    .suggestion-actions {
      flex-direction: column;
      
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>